<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>${fns:getConfig('productName')} 登录</title>
    <link media="all" href="${ctxStatic}/login3/login3.css" type="text/css" rel="stylesheet">
    <link href="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet">
    <script src="${ctxStatic}/jquery/jquery-1.8.3.min.js"></script>
    <!--背景图片自动更换-->
    <script src="${ctxStatic}/supersize/supersized.3.2.7.min.js"></script>
    <script src="${ctxStatic}/supersize/supersized-init.js"></script>
    <!--表单验证-->
    <script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.js"></script>

    <script type="text/javascript">
        //打开字滑入效果
        window.onload = function () {
            $(".connect p").eq(0).animate({"left": "0%"}, 600);
            $(".connect p").eq(1).animate({"left": "0%"}, 400);
        };
        //jquery.validate表单验证
        $(document).ready(function () {
            //登陆表单验证
            $("#loginForm").validate({
                rules: {

                },
                rules:{
                    username:{
                        required:true
                    },
                    password:{
                        required:true
                    },
                    validateCode: {
                        remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"
                    }
                },
                //错误信息提示
                messages:{
                    username:{
                        required:"请输入用户名",
                        minlength:"用户名至少为3个字符",
                        maxlength:"用户名至多为32个字符",
                        remote: "用户名已存在",
                    },
                    password:{
                        required:"请输入密码",
                        minlength:"密码至少为3个字符",
                        maxlength:"密码至多为32个字符",
                    },
                },
                errorLabelContainer: "#messageBox",
                errorPlacement: function(error, element) {
                    error.appendTo($("#loginError").parent());
                }

            });
            //添加自定义验证规则
            jQuery.validator.addMethod("phone_number", function (value, element) {
                var length = value.length;
                var phone_number = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
                return this.optional(element) || (length == 11 && phone_number.test(value));
            }, "手机号码格式错误");

            $("a.close").click(function () {
                $(this).parent().hide();
            });
            //$(window).resize();
        });
        // 如果在框架或在对话框中，则弹出提示并跳转到首页
        if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
            alert('未登录或登录超时。请重新登录，谢谢！');
            top.location = "${ctx}";
        }
    </script>
    <style type="text/css">
        .alert {
            margin-bottom: auto;
            border-radius: 4px;
            padding: 8px 35px 8px 14px;
            text-shadow: 0 1px 0 rgba(255,255,255,0.5);
            border: 1px solid #efb99e;
        }
        .alert-error {
            color: #bd4247;
            background-color: #f2bdb1;
            border-color: #f0a5a4;
            text-align: left;
        }
        .hide{
            display: none;
        }
        .close{
            float: right;
        }
        .close:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
<!--[if lte IE 6]><br/><div class='alert alert-block' style="text-align:left;padding-bottom:10px;"><a class="close" data-dismiss="alert">x</a><h4>温馨提示：</h4><p>你使用的浏览器版本过低。为了获得更好的浏览体验，我们强烈建议您 <a href="http://browsehappy.com" target="_blank">升级</a> 到最新版本的IE浏览器，或者使用较新版本的 Chrome、Firefox、Safari 等。</p></div><![endif]-->

<div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}"><a class="close">×</a>
    <label id="loginError" class="error">${message}</label>
</div>
<div class="login-container">
    <div>
        <img src="${ctxStatic}/images/logo.png" width="163" height="56"/>
    </div>
    <form action="${ctx}/login" method="post" id="loginForm"
          novalidate="novalidate">
        <div>
            <input name="username" class="username" placeholder="用户名" autocomplete="off" value="" type="text">
        </div>
        <div>
            <input name="password" class="password" placeholder="密码" oncontextmenu="return false" onpaste="return false"
                   type="password">
        </div>
        <c:if test="${isValidateCodeLogin}"><div class="validateCode">
            <label class="input-label mid" for="validateCode">验证码</label>
            <sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
        </div></c:if>
        <button id="submit" type="submit">登 录</button>
    </form>
    <div class="footer">
        Copyright &copy; 2017-${fns:getConfig('copyrightYear')} <a href="${pageContext.request.contextPath}${fns:getFrontPath()}">${fns:getConfig('productName')}</a> - Powered By <a href="http://www.fosung.com/" target="_blank">Fosung</a> ${fns:getConfig('version')}
    </div>
</div>
</body>
</html>